<template>
	<view class="user">
		<!--账户信息面板-->
		<view class="user-section">
			<!--用户信息-->
			<view class="user-info-box">
				<view  class="portrait-box"
					@tap="navTo(userInfo ? '/pages/user/userinfo/userinfo' : 'login')">
					<image class="portrait" :src="userInfo.image || headImg"></image>
					<view>
						<text class="username">
							{{
								userInfo.mobile ||
								userInfo.realname || userInfo.nickname || 
									'登录/注册'
							}}
						</text>
						
					</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="account-bill">
			<view @tap="navTo('/pages/user/parent/partnerWith?type=2')"
				class="list-cell b-b"
				hover-class="cell-hover">
				<text class="cell-tit">可提现奖励</text>
				<text class="cell-tip">{{userInfo.commission}}</text>
				<text class="cell-more iconfont iconyou"></text>
			</view>
			
			<view
				class="list-cell b-b"
				@tap="navTo('/pages/user/parent/orders')"
				hover-class="cell-hover">
				<text class="cell-tit">奖励订单</text>
				<text class="cell-tip"></text>
				<text class="cell-more iconfont iconyou"></text>
			</view>
			<view
				class="list-cell b-b"
				@tap="navTo('/pages/user/parent/shops')"
				hover-class="cell-hover">
				<text class="cell-tit">推广门店</text>
				<text class="cell-tip"></text>
				<text class="cell-more iconfont iconyou"></text>
			</view>
			
			<!-- <view
				class="list-cell b-b"
				
				hover-class="cell-hover">
				<text class="cell-tit">专属链接</text>
				<text class="cell-tip"></text>
				<text class="cell-more iconfont iconyou"></text>
			</view> -->
		</view>
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
	/**
	 * @des 用户账户中心
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 15:17
	 * @copyright 2019
	 */
	import {
		creditsLogList
	} from '@/api/userInfo';
	import {
		memberInfo
	} from '@/api/userInfo';
	import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
	export default {
		components: {
			rfLoadMore
		},
		data() {
			return {
				userInfo: {},
				loading: true,
				tabCurrentIndex: 0,
				isOpenRecharge: this.$mSettingConfig.isOpenRecharge,
				navList: [{
						title: '账单记录',
						icon: 'icondaifukuan',
						url: '/pages/user/shop/storebill'
					},
					// {
					// 	title: '充值记录',
					// 	icon: 'iconchongzhijilu',
					// 	url: '/pages/user/account/bill?state=2'
					// },
					// {
					// 	title: '消费记录',
					// 	icon: 'iconzuheduozhongxiaofeifangshizuhexiaofei',
					// 	url: '/pages/user/account/bill?state=3'
					// },
					// {
					// 	title: '红包中心',
					// 	icon: 'iconjifenqia',
					// 	url: '/pages/user/account/integral'
					// },
					// {
					// 	title: '提现',
					// 	icon: 'iconchongzhijilu',
					// 	url: '/pages/user/shop/with?type=2'
					// },
					// {
					// 	title: '押金转余额',
					// 	icon: 'iconzuheduozhongxiaofeifangshizuhexiaofei',
					// 	url: 'money'
					// }
				],
				billTypeList: [{
						state: 1,
						text: '全部'
					},
					{
						state: 2,
						text: '收入'
					},
					{
						state: 3,
						text: '消费'
					}
				],
				integralList: [],
				loadingType: 'more',
				pageNum: 0
			};
		},
		onShow() {
			this.initData();
		},
		onLoad(options) {
			//this.getIntegralListList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 0;
			this.integralList = [];
			this.getIntegralListList('refresh');
		},
		// 加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore') return;
			this.pageNum++
			this.getIntegralListList();
		},
		methods: {
			// 顶部tab点击
			tabClick(index, state) {
				this.pageNum = 0;
				this.integralList.length = 0;
				this.loading = true;
				this.tabCurrentIndex = index;
				this.state = state;
				this.getIntegralListList();
			},
			// 初始化数据
			initData() {
				this.getMemberInfo();
			},
			async getIntegralListList(type) {
				const params = {};
				params.filterType = 1;
				if (this.state === 2) {
					params.filterType = 2;
				} else if (this.state === 3) {
					params.filterType = 3;
				}
				params.pageNum = this.pageNum;
				params.source = '1';
				await this.$http
					.get(`${creditsLogList}`, {
						...params
					})
					.then(r => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						if (r.list) {
							this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
							this.integralList = [...this.integralList, ...r.list];
						}
					})
					.catch(() => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			// 获取用户信息
			async getMemberInfo() {
				this.$http.get(memberInfo).then(async res => {
					this.loading = false;
					this.userInfo = res;
					let storeId = res.storeId;
					this.storeId = storeId + '';
					// this.$http.get('/store/TStoreInfo/querystoreinfo?storeId=' + storeId).then(r => {

					// 	this.userInfo = r || {};
					// 	if (r.customerId != res.id) {
					// 		this.num = 2
					// 	}
					// 	this.userInfo.qrcode = res.qrcode;
					// });

				}).catch(() => {

					this.loading = false;
				});
			},
			navTo(route) {
				if (route == 'money') {
					uni.showModal({
						content: '是否确认转余额?',
						success: e => {
							if (e.confirm) {

								this.$http
									.get(`/depositByBalance`, {

									})
									.then(() => {
										this.btnLoading = false;
										this.$mHelper.toast('操作成功！');
										this.$mRouter.back();
									})
									.catch(() => {
										this.btnLoading = false;
									});

							}
						}

					});
				} else {
					this.$mRouter.push({
						route
					});
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: $color-white;
	}

	.my-account {
		background-color: $color-white;
		/*  #ifndef H5  */
		height: 100vh;
		/*  #endif  */
		padding: 32upx 20upx;
		width: 100%;

		.header {
			padding: 30upx;
			height: 320upx;
			opacity: 0.9;
			border-radius: 20upx;
			color: rgba(255, 255, 255, 0.6);
			font-size: $font-sm;
			position: relative;

			.account {
				width: calc(100% - 60upx);
				display: flex;
				position: absolute;
				z-index: 2;
				justify-content: space-between;

				.assets {
					.money {
						color: #fff;
						font-size: $font-lg + 10upx;
						margin: 0;
					}
				}

				.recharge {
					font-size: $font-base;
					width: 150upx;
					height: 54upx;
					line-height: 54upx;
					border-radius: $font-base;
					background-color: #fff9f8;
					text-align: center;
					margin-top: 10upx;
				}
			}

			.cumulative {
				width: calc(100% - 240upx);
				position: absolute;
				bottom: 20upx;
				display: flex;
				justify-content: space-between;

				.money {
					color: #fff;
					font-size: $font-lg + 4upx;
					margin: 0;
				}
			}

			.header-bg {
				position: absolute;
				width: 100%;
				height: 320upx;
				z-index: 1;
				top: 0;

				image {
					width: 100%;
					height: 320upx;
				}
			}
		}

		.nav {
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.item {
				flex: 1;
				margin: 20upx;
				font-size: $font-base - 4upx;
				display: inline-block;
				text-align: center;
				color: #999;

				.iconfont {
					display: block;
					margin: 0 auto;
					font-size: $font-lg + 20upx;
				}
			}
		}

		.advert {
			display: flex;

			.item {
				flex: 1;
				border-radius: 24upx;
				padding: 10upx 0;
				margin: 20upx 10upx;
				display: flex;
				justify-content: space-between;

				.iconfont {
					font-size: $font-lg + 20upx;
					margin-right: 20upx;
				}

				.text {
					margin-left: 20upx;

					.name {
						font-size: $font-base;
						font-weight: bold;
						height: 40upx;
					}

					.desc {
						font-size: $font-sm - 2upx;
					}
				}
			}

			.on {
				background-color: #fff3f3;
			}
		}
	}
	%section {
		justify-content: space-around;
		display: flex;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.user {
		background: linear-gradient(0deg, #F8FCFF 0%, #F8FCFF 30%, #5667F5 100%);
	
		.user-section {
			min-height: 520upx;
			padding: 100upx 30upx 0;
			position: relative;
	
			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 60vw;
				opacity: 0.84;
			}
	
			.user-info-box {
				height: 180upx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				justify-content: space-between;
	
				.portrait-box {
					display: flex;
					align-items: center;
					border: none;
					background: transparent;
					margin: 0;
					padding: 0;
					height: auto;
	
					&:after {
						display: none;
					}
	
					.portrait {
						width: 130upx;
						height: 130upx;
						border: 5upx solid #fff;
						border-radius: 50%;
					}
	
					.username {
						font-size: $font-lg + 6upx;
						color: $color-white;
						margin-left: 20upx;
					}
	
					.star {
						display: flex;
						margin-left: 20upx;
	
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
	
					button {
						background-color: transparent;
						font-size: $font-lg + 6upx;
						color: $font-color-dark;
						border: none;
					}
	
					button::after {
						border: none;
					}
				}
			}
	
			.vip-card-box {
				display: flex;
				flex-direction: column;
				color: #f7d680;
				height: 240upx;
				background: url('/static/vip-card.png');
				background-size: 100% 100%;
				border-radius: 16upx 16upx 0 0;
				overflow: hidden;
				position: relative;
				padding: 20upx 24upx;
	
				.b-btn {
					position: absolute;
					right: 24upx;
					top: 24upx;
					width: 132upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					font-size: 22upx;
					color: #36343c;
					border-radius: 20px;
					background: linear-gradient(to left, #f9e6af, #ffd465);
					z-index: 1;
				}
	
				.tit {
					font-size: $font-base + 2upx;
					color: #f7d680;
					margin-bottom: 28upx;
	
					.iconfont {
						color: #f6e5a3;
						display: inline-block;
						margin-right: 16upx;
					}
				}
			}
		}
	
		.cover-container {
			margin-top: -10upx;
			padding: 40rpx 36rpx;
			border-radius: 32rpx 32rpx 0 0;
			position: relative;
			background-color: #F5F7FB;
	
			.arc {
				position: absolute;
				left: 0;
				top: -34upx;
				width: 100%;
				height: 36upx;
			}
	
			.promotion-center {
				background: #fff;
				margin-bottom: 20upx;
	
				/*分类列表*/
				.category-list {
					width: 100%;
					padding: 0 0 30upx 0;
					border-bottom: solid 2upx #f6f6f6;
					display: flex;
					flex-wrap: wrap;
	
					.category {
						width: 33.3%;
						margin-top: 50upx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;
	
						.img {
							width: 100%;
							display: flex;
							justify-content: center;
	
							.iconfont {
								font-size: $font-lg + 24upx;
							}
						}
	
						.text {
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 24upx;
							color: #3c3c3c;
						}
	
						.share-btn {
							height: 142upx;
							text-align: left;
							background: none;
							padding: 0;
							margin: 0;
						}
	
						.share-btn:after {
							border: none;
							border-radius: none;
						}
					}
				}
			}
	
			.tj-sction {
				@extend %section;
				display: flex;
	
				.tj-item {
					@extend %flex-center;
					flex: 1;
					flex-direction: column;
					margin: 30upx 0;
					font-size: $font-sm;
					color: #75787d;
					/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
				}
	
				/*.tj-item:last-child {*/
				/*border-right: none;*/
				/*}*/
				.num {
					font-size: $font-base;
				}
	
				.red {
					color: $base-color;
				}
			}
	
			.order-section {
				@extend %section;
				padding: 28upx 0;
	
				.order-item {
					@extend %flex-center;
					width: 120upx;
					height: 120upx;
					border-radius: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
					position: relative;
				}
	
				.badge {
					position: absolute;
					top: 0;
					right: 4upx;
				}
	
				.iconfont {
					font-size: 48upx;
				}
	
				.icon-shouhoutuikuan {
					font-size: 44upx;
				}
			}
	
			.history-section {
				background: #fff;
				margin-bottom: $spacing-sm;
	
				.h-list-history {
					margin: 0;
					border-radius: 10upx;
					white-space: nowrap;
					background-color: $page-color-base;
	
					.h-item-history {
						background-color: $color-white;
						display: inline-block;
						font-size: $font-sm;
						color: $font-color-base;
						width: 180upx;
						margin: $spacing-sm $spacing-sm 0 0;
						border-radius: 10upx;
						position: relative;
						top: 0;
						overflow: hidden;
	
						.h-item-img {
							width: 180%;
							height: 200upx;
							border-top-left-radius: 12upx;
							border-top-right-radius: 12upx;
							border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
						}
	
						.tag {
							position: absolute;
							border-top-left-radius: 12upx;
							left: 0;
							right: 0;
							width: 60upx;
							height: 60upx;
						}
	
						.h-item-text {
							font-size: $font-sm;
							margin: $spacing-sm 4upx;
						}
					}
				}
	
				.no-foot-print {
					text-align: center;
					padding: 48upx 0;
	
					.no-foot-print-icon {
						font-size: $font-lg + 2upx;
						margin-right: 10upx;
					}
				}
	
				.share-btn {
					height: 102upx;
					text-align: left;
					background: none;
					padding: 0;
					margin: 0;
				}
	
				.share-btn:after {
					border: none;
					border-radius: none;
				}
			}
		}
	}
	.account-bill {
		margin: 10px;
		
	}
</style>